<template>
  <div>
    <div
      v-for="item in diaryData"
      :key="item.diary_group_id"
      class="content-diary-item"
    >
      <nuxt-link :to="`/diary/${item.diary_group_id}`">
        <div
          class="diary-before-img"
          :style="{background: `url('${item.before_image ? item.before_image.thumbnail_url : ''}') center center no-repeat`,backgroundSize:'cover'}"
        >
          <img
            src="~assets/img/before-icon.png"
            class="before-icon"
          >
        </div>
      </nuxt-link>
      <nuxt-link :to="`/diary/${item.diary_group_id}`">
        <div
          class="diary-after-img"
          :style="{background: `url('${item.after_image ? item.after_image.thumbnail_url : ''}') center center no-repeat`,backgroundSize:'cover'}"
        >
          <img
            src="~assets/img/after-icon.png"
            class="after-icon"
          >
        </div>
      </nuxt-link>
      <div class="content-diary-content">
        <User :user-data="item" />
        <nuxt-link :to="`/diary/${item.diary_group_id}`">
          <div class="content-diary-text">
            {{ item.diary_content }}
          </div>
        </nuxt-link>
        <div class="content-diary-footer">
          <div class="content-diary-project">
            <div class="topic-icon" />
            <div class="content-diary-project-text">
              {{ item.project[0].project_name }}
            </div>
          </div>
          <div class="content-diary-operation">
            <div class="content-look">
              {{ item.browse_count }}人已看
            </div>
            <div class="content-comment">
              <div class="content-comment-text">
                {{ item.comment_count }}
              </div>
              <div class="content-comment-icon" />
            </div>
            <div class="content-star">
              <div class="content-star-text">
                {{ item.star_count }}
              </div>
              <div class="content-star-icon" />
            </div>
            <div />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import User from '@/components/user'
export default {
  components: {
    User
  },
  props: {
    diaryData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
.content-diary-item {
  width: 803px;
  height: 155px;
  margin-bottom: 16px;
  display: flex;
  .diary-before-img {
    width: 155px;
    height: 155px;
    position: relative;
    .before-icon {
      width: 48px;
      height: 16px;
      position: absolute;
      right: 4px;
      top: 4px;
    }
  }
  .diary-before-img:hover{
    cursor: pointer;
  }
  .diary-after-img {
    width: 155px;
    height: 155px;
    margin-left: 4px;
    position: relative;
    .after-icon {
      width: 48px;
      height: 16px;
      position: absolute;
      right: 4px;
      top: 4px;
    }
  }
  .diary-after-img:hover{
    cursor: pointer;
  }
  .content-diary-content {
    flex: 1;
    padding-left: 21px;
    .content-diary-text {
      width: 468px;
      height: 51px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 17px;
      margin-top: 5px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .content-diary-text:hover{
      cursor: pointer;
    }
  }
  .content-diary-footer {
    width: 100%;
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content-diary-project:hover{
      cursor:default;
    }
    .content-diary-project {
      height: 20px;
      background: rgba(80, 76, 255, 0.06);
      border-radius: 12px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .topic-icon {
        width: 12px;
        height: 14px;
        background: url("~assets/img/topic-icon.png") center center no-repeat;
        background-size: 100% 100%;
      }
      .content-diary-project-text {
        font-size: 11px;
        font-weight: 400;
        color: rgba(80, 76, 255, 1);
        line-height: 16px;
        margin-left: 3px;
      }
    }
    .content-diary-operation {
      font-size: 12px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      display: flex;
      .content-comment {
        margin-left: 23px;
        display: flex;
        align-items: center;
        .content-comment-icon {
          width: 14px;
          height: 13px;
          background: url("~assets/img/comment-icon.png") center center
            no-repeat;
          background-size: 100% 100%;
          margin-left: 10px;
        }
      }
       .content-star {
        margin-left: 23px;
        display: flex;
        align-items: center;
        .content-star-icon {
          width: 14px;
          height: 13px;
          background: url("~assets/img/star-icon.png") center center
            no-repeat;
          background-size: 100% 100%;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
